<template>
	<view class="question_wrapper">
		<!-- 答题组件使用swiper轮播组件开发，可以支持左右滑动选题功能。 -->
		<swiper class="question_swiper" :current="current" @change="handleSwiperChange" :indicator-dots="false" :autoplay="false"
			:interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in questions" :key="item.id">
				<view>
					<!-- 题干部分 -->
					<view class="question_item_name">
						<text v-if="item.type==='1'" :class="'question_item_type_'+item.type">单选题</text>
						<text v-if="item.type==='2'" :class="'question_item_type_'+item.type">多选题</text>
						<text v-if="item.type==='3'" :class="'question_item_type_'+item.type">判断题</text>
						{{index+1}}. {{item.name}}
					</view>

					<!-- 选项部分 -->
					<view v-for="o in item.options"
						:class="'question_item_option'+(item.answered?(o.status ==='1'?' right':(o.status === '0'?' error':' ')):((item.selects?(item.selects.indexOf(o.id)>=0?' select':' '):' ' )))"
						@tap="handleAnswer(item,o)">
						<view class="question_item_option_id">
							{{o.id}}
						</view>
						<view class="question_item_option_name">
							{{o.name}}
						</view>
					</view>

					<!-- 如果是多选，并且还未答此题则提供确认选择按钮 -->
					<view v-if="item.type === '2' && !item.answered" class="question_item_button"
						@tap="handleSubmit(item)">
						提交选择
					</view>

					<!-- 解析部分，答完题后展示解析 -->
					<view v-if="item.answered" class="question_item_parse">
						<view>正确答案： <text style="color:#6db786;font-weight: bold;">{{item.answer}} </text></view>
						<view>{{item.parse}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>

		<!-- 底部操作栏 -->
		<view class="question_bar">
			<view class="question_bar_icon_wrapper">
				<image @tap="handleCard" class="question_bar_icon" src="../../static/menu.svg" mode="aspectFill">
				</image>
			</view>

			<!-- 页码 -->
			<view class="question_bar_info">
				{{current + 1}} / {{questions.length}}
			</view>
		</view>
		
		<!-- 隐藏的答题卡 -->
		<view v-if="cardVisible" class="question_card">
			<view v-for="(p,index) in questions" :class="'question_card_point'+(index === current ? ' current' :(p.answered?(p.right?' card-right':' card-error'):''))" @tap="handleJump(index)">
				{{index + 1}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadCategoryById,
		loadQuestionByCategoryId
	} from '../../service/api.js';
	export default {
		data() {
			return {
				// 当前类别
				category: null,
				// 当前题目列表
				questions: [],
				// 当前是第几题
				current: 0,
				// 答题卡可见性
				cardVisible: false
			}
		},
		// 页面加载事件，通过此事件获取到类别id。
		// 根据id查询类别详情和类别下的题目信息
		onLoad(props) {
			this.category = loadCategoryById(props.categoryId);
			this.questions = loadQuestionByCategoryId(props.categoryId);

			// 将题目类别显示在标题上。
			uni.setNavigationBarTitle({
				title: this.category.name
			});
		},
		methods: {
			// 答题卡跳转指定题目
			handleJump(current) {
				this.current = current;
				this.cardVisible = false;
			},
			// 展示答题卡
			handleCard() {
				this.cardVisible = !this.cardVisible;
				console.log('打开答题卡')
			},
			// 轮播改变事件，记录当前索引
			handleSwiperChange(e) {
				const index = e.detail.current;
				this.current = index;
			},
			/**
			 * 回答题目
			 * @param {Object} question 正在答的题目
			 * @param {Object} option 选择的选项
			 */
			handleAnswer(question, option) {
				// 如果此题目已被答过，则直接返回。
				if (question.answered) return;

				// 否则通过数组记录当前用户所答的选项。
				let selects = question.selects || [];
				const index = selects.indexOf(option.id);
				if (index >= 0) {
					selects.splice(index, 1);
				} else {
					selects.push(option.id);
					selects = selects.sort();
				}
				question.selects = selects;
				this.$set(this.questions, this.questions.indexOf(question), question);

				// 如果是单选和判断，则自动进行提交
				if (question.type === '1' || question.type === '3') {
					this.handleSubmit(question);
				}
			},

			/**
			 * 提交题目
			 * @param {Object} question正在答题的题目
			 */
			handleSubmit(question) {
				// 将此题回答状态改成已回答，并进行回答正确失败的验证。
				if (!question.selects || question.selects.length === 0) {
					uni.showToast({
						title: '请选择选项！',
						icon: 'none'
					});
					return;
				}
				question.answered = true;
				question.right = question.answer === question.selects.join('');
				for (let i = 0; i < question.options.length; i += 1) {
					const id = question.options[i].id;
					// 如果这个选项是正确选项
					if (question.answer.split('').indexOf(id) >= 0) {
						// 并且用户也选对了，则给答对标记，否则是给答错标记。
						if (question.selects.indexOf(id) >= 0)
							question.options[i].status = '1';
						else
							question.options[i].status = '0';
					}
					// 如果这个选项不是正确选项，但是用户答了，则给答错标记
					else {
						if (question.selects.indexOf(id) >= 0)
							question.options[i].status = '0';
					}
				}
				this.$set(this.questions, this.questions.indexOf(question), question);
			}
		}
	}
</script>

<style>
	.question_card{
		background: white;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 110rpx;
		height: 60vh;
		box-shadow: 0 0 80rpx 8rpx #0000003d;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
	}
	.question_card_point{
		width: 70rpx;
		height: 70rpx;
		border: 2rpx solid #000000a6;
		color: #000000a6;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		margin: 20rpx;
	}
	.question_wrapper {
		background: #0000000d;
		min-height: 100vh;
	}

	.question_swiper {
		min-height: 100vh;
	}

	.question_item_name {
		background: white;
		padding: 30rpx;
		min-height: 200rpx;
		font-size: 32rpx;
		color: #1d2342b0;
		letter-spacing: 1rpx;
		line-height: 50rpx;
	}

	.question_item_type_1 {
		background: #7496ff;
		color: white;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.question_item_type_2 {
		background: #ffa874;
		color: white;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.question_item_type_3 {
		background: #ff7474;
		color: white;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-radius: 10rpx;
	}

	.question_item_option {
		background: white;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 30rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		border: 2rpx solid white;
	}

	.question_item_option_id {
		font-weight: bold;
	}

	.question_item_option_name {
		margin-left: 30rpx;
		color: #000000b3;
	}

	.question_item_button {
		background: #6296e8;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60rpx 30rpx 30rpx 30rpx;
		padding: 26rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		color: white;
	}

	.select {
		border: 2rpx solid #7f93ff;
	}

	.right {
		border: 2rpx solid #92df9a;
	}

	.error {
		border: 2rpx solid #fba1a1;
	}

	.question_item_parse {
		background: white;
		padding: 30rpx;
		margin: 30rpx;
		font-size: 28rpx;
		color: #000000ad;
	}

	.question_bar {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		background: white;
		display: flex;
		align-items: center;
		padding: 40rpx;
		z-index: 9999;
	}

	.question_bar_icon_wrapper {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.question_bar_icon {
		width: 36rpx;
		height: 36rpx;
	}

	.question_bar_info {
		color: #000000a3;
		font-size: 28rpx;
	}
	.current{
		background: #3493f9e6;
		color: white;
		border: 2rpx solid #3493f9e6;
	}
	.card-right{
		background: #92df9a;
		color: white;
		border: 2rpx solid #92df9a;
	}
	.card-error{
		background: #fba1a1;
		color: white;
		border: 2rpx solid #fba1a1;
	}
</style>
